<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">

      <!-- 搜索 -->
      <el-input v-model.trim="query.name" clearable placeholder="输入类型名称" style="width: 150px;"
                class="filter-item" @keyup.enter.native="crud.toQuery" maxlength="15"/>
      <rrOperation/>

      <crudOperation :permission="permission"/>
      <!--表单组件-->
      <!-- :title="crud.status.title" -->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0"
                 :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">

          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" clearable placeholder="请输入人员名称" maxlength="60"/>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="form.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择人员类型">
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" clearable placeholder="请输入手机号" maxlength="20"/>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input-number v-model="form.sort" :min="0" :max="10" label="排序"></el-input-number>
          </el-form-item>
          <el-form-item label="是否开启">
            <el-switch v-model="form.isOpen" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                       :inactive-value="0"/>
          </el-form-item>
          <el-form-item label="描述" prop="describe">
            <el-input v-model="form.describe" clearable placeholder="请输入描述" maxlength="200"/>
          </el-form-item>
          <el-form-item label="头像" prop="imageUrl">
            <el-upload
              class="avatar-uploader"
              action="api_ws/api/Contract/AttachmentUpload"
              :http-request="uploadImg"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="视频" prop="videoUrl">
            <el-upload class="avatar-uploader"
                       action="api_ws/api/Contract/AttachmentUpload"
                       :http-request="uploadVideo"
                       :show-file-list="false"
                       :on-success="handleAvatarSuccess"
                       :before-upload="beforeAvatarUpload">
              <video v-if="form.videoUrl !='' && !videoFlag"
                     v-bind:src="form.videoUrl"
                     class="avatar video-avatar"
                     controls="controls">
                您的浏览器不支持视频播放
              </video>
              <i v-else-if="form.videoUrl =='' && !videoFlag" class="el-icon-plus avatar-uploader-icon"></i>
              <el-progress v-if="videoFlag == true"
                           type="circle"
                           v-bind:percentage="videoUploadPercent"
                           style="margin-top:7px;"></el-progress>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
                @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="name" label="姓名"/>
        <el-table-column prop="sexStr" label="性别"/>
        <el-table-column prop="typeStr" label="人员类型"/>
        <el-table-column label="是否开启" prop="isOpen">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isOpen"
              active-color="#00A854"
              :active-value="1"
              inactive-color="#F04134"
              :inactive-value="0"
              @change="changeSwitch(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="小程序排序"/>
        <el-table-column prop="phone" label="手机号"/>
        <el-table-column prop="createTime" label="创建时间"/>
        <el-table-column v-permission="['admin','personnel:edit','personnel:del']" label="操作"
                         width="150px"
                         align="center">
          <template slot-scope="scope">
            <udOperation :data="scope.row" :permission="permission"/>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination/>
    </div>
  </div>
</template>

<script>
  import crudPersonnel from '@/api/personnel'
  import CRUD, { presenter, header, form, crud } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'
  import request from '@/utils/request'
  import { getToken } from '@/utils/auth'
  import axios from 'axios'

  const defaultForm = {
    id: '',
    name: '',
    sex: 1,
    type: null,
    phone: '',
    describe: '',
    isOpen: 0,
    sort: 0,
    imageUrl: '',
    videoUrl: '',
    isDelete: 0,
    createTime: null,
    updateTime: null

  }
  export default {
    name: '人员',
    components: { pagination, crudOperation, rrOperation, udOperation },
    mixins: [presenter(), header(), form(defaultForm), crud()],
    cruds() {
      return CRUD({
        title: '人员', url: 'api/personnel', sort: 'id,desc', crudMethod: { ...crudPersonnel }, optShow: {
          add: true,
          edit: true,
          del: true,
          reset: true
        }
      })
    },
    data() {
      return {
        permission: {
          add: ['personnel:add'],
          edit: ['personnel:edit'],
          del: ['personnel:del']
        },
        rules: {
          name:
            [
              { required: true, message: '不能为空', trigger: 'blur' }
            ],
          describe:
            [
              { required: true, message: '不能为空', trigger: 'blur' }
            ],
          sort:
            [
              { required: true, message: '不能为空', trigger: 'blur' }
            ],
          imageUrl:
            [
              { required: true, message: '不能为空', trigger: 'blur' }
            ]
        },
        typeList: [],
        videoFlag: false,
        //是否显示进度条
        videoUploadPercent: '',
        //进度条的进度，
        isShowUploadVideo: false
      }
    },
    created() {
      this.queryTypeList()
    },
    methods: {
      // 获取数据前设置好接口地址
      [CRUD.HOOK.beforeRefresh]() {
        return true
      },
      changeSwitch(data) {
        request({
          url: 'api/personnel/updateIsOpenState',
          method: 'post',
          data: { id: data.id, isOpen: data.isOpen }
        }).then(response => {
          if (response.code == '00') {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
          } else {
            this.$message.error('操作失败')
          }
        })
      },
      uploadImg(param, type) {
        let formData = new FormData()
        formData.append('file', param.file)
        let config = {
          headers: { 'Authorization': getToken() }
        } //添加请求头

        axios.post('/api/personnel/uploadFile', formData, config).then(res => {
          this.form.imageUrl = res.data.filePath
        })

      },

      uploadVideo(param, type) {
        let formData = new FormData()
        formData.append('file', param.file)
        let config = {
          headers: { 'Authorization': getToken() }
        } //添加请求头

        axios.post('/api/personnel/uploadFile', formData, config).then(res => {
          this.form.videoUrl = res.data.filePath
        })
      },

      handleAvatarSuccess(res, file) {

      },
      queryTypeList() {
        request({
          url: 'api/personnel/queryPersonnelTypeList',
          method: 'post'
        }).then(response => {
          debugger
          if (response.code == '00') {
            debugger
            this.typeList = response.data
          } else {
            this.$message.error('操作失败')
          }
        })
      }

    }
  }
</script>
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
